<template>
  <div class="card-container">
    <div class="card-head">
      <img src="@/assets/images/service/advantage/folder@2x.png" alt="">
      <h1>{{ title }}</h1>
    </div>
    <p>{{ content }}</p>
  </div>
</template>

<script lang='ts' setup>
const props = defineProps(['title', 'content', 'flexDirection', 'padding', 'background', 'boxShadow'])
const background = props.background ?? '#fff'
const boxShadow = props.boxShadow ?? '-4px 0px 8.1px 0.4px rgba(0, 0, 0, 0.10)'
const cardWidth = props.flexDirection === 'column' ? '5rem' : '3rem'
</script>

<style scoped lang="scss">
.card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem v-bind(padding);
  border-radius: 10px;
  box-shadow: v-bind(boxShadow);
  background: v-bind(background);
  margin-top: 2rem;

  .card-head {
    display: flex;
    align-items: center;
    flex-direction: v-bind(flexDirection);

    img {
      width: v-bind(cardWidth);
      padding: 0 1.5rem 1.5rem;
      box-sizing: content-box;
    }

    h1 {
      font-size: 1.3rem;
      text-align: center;
    }
  }

  p {
    margin-top: 1.5rem;
    font-size: 1rem;
  }
}

@media screen and (max-width: 780px) {
  .card-container {
    width: 100%;
  }
}
</style>